<template>
	<div>
		<navHeader :title="$t('l_youjiangfankui')"></navHeader>

		<div class="tab">
			<div class="tabitem" :class="tab == 0 ? 'active':''" @click="tab = 0">{{$t('l_youjiangfankui')}}</div>
			<div class="tabitem" :class="tab == 1 ? 'active':''" @click="tab = 1">{{$t('l_wodefankui')}}</div>
		</div>
		<div class="con" v-if="tab == 0">
			<div class="top">
				<div class="text">{{$t('l_fankuineirong')}}<span>（{{$t('l_nitiwogai')}}）</span></div>
				<el-input v-model="textarea" :rows="2" type="textarea" :placeholder="$t('l_baoguiyijian')"
					maxlength="200" show-word-limit="true" />
				<div class="text" style="margin-top: 0.3rem;">
					{{$t('l_youtuyouzhenxiang')}}<span>（{{$t('l_gengrongyicaina')}}）</span></div>
				<div class="updata">
					<div class="updataimg">
						<span class="dnYUUDV25IlSW_S8juP6"></span>
						<span class="Eaw_t5ASDXk8DId5Ps3c"></span>
						<input type="file" multiple="multiple"
							accept="image/png,image/jpeg,image/jpg,image/gif,video/mp4,video/mp4,video/mp4,video/mp4,video/mp4,video/mp4"
							class="pRNoweFo4ia8VfONCik4">
					</div>
				</div>
				<div class="text1">{{$t('l_budayu50')}}</div>
				<div class="text2" style="margin-top: 0.3rem;">{{$t('l_jiangliguize')}}</div>
				<div class="text1">{{$t('l_juejiangjin')}}</div>
				<div class="orkXHvtNM5R_5twq6l5I">
					<div class="baocun">{{$t('l_tijiao')}}</div>
				</div>
			</div>
		</div>
		<div class="con" v-if="tab == 1">
			<div v-if="showhide">
				<div class="conitem" @click="selectfeedback">
					<div class="citop">{{$t('l_fankuiid')}}:3464430</div>
					<div class="cicon">
						<div class="left">12333333333</div>
						<div class="right">
							<span>{{$t('l_daichuli')}}</span>
							<i class="eWpIvvWooY9HHXe2jC2q"
								style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
								</svg>
							</i>
						</div>
					</div>
					<div class="time">2023-09-05 18:02:35</div>
				</div>
			</div>
			<div class="con1" v-else>
				<div class="label">{{$t('l_fankuineirong')}}</div>
				<img
					src="https://zswsql-266-ppp.oss-accelerate.aliyuncs.com/feedback/upload/32334991_20230905180235.328.png">
				<p>12333333333</p>
			</div>
		</div>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				tab: 0,

				textarea: '',

				showhide: true,
			}
		},
		methods: {
			selectfeedback(e) {
				this.showhide = false
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.tab {
		width: 100%;
		background-color: var(--theme-top-nav-bg);;
		justify-content: space-around;
		align-items: center;
		display: flex;
		margin-bottom: 0;
		border-bottom: 1px solid var(--theme-color-line);
	}

	.tabitem {
		height: 0.72rem;
		font-size: .24rem;
		width: 50%;
		border-bottom: 0.04rem solid transparent;
		align-items: center;
		color: #ffffff;
		cursor: pointer;
		display: flex;
		justify-content: center;
		line-height: .24rem;
		position: relative;
		text-align: center;
		white-space: nowrap;
		word-break: break-word;
	}

	.tabitem.active {
		border-bottom: 0.04rem solid var(--theme-primary-color);
		color: var(--theme-primary-color);
	}

	.con {
		padding: 0.2rem;
	}

	.top {
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.text {
		font-size: .24rem;
		margin-bottom: 0.16rem;
		color: #ffffff;
	}

	.text span {
		color: var(--theme-alt-neutral-2);
		margin-left: 0.1rem;
	}

	/deep/ .el-textarea__inner {
		font-size: .2rem;
		background-color: var(--theme-top-nav-bg);;
		border: 0.01rem solid var(--theme-color-line);
		color: #ffffff;
		padding: 0.2rem 0.2rem 0.3rem;
		line-height: 1.5;
		height: 130px;
	}

	/deep/ .el-textarea__inner::placeholder {
		color: var(--theme-alt-neutral-2);
	}

	/deep/ .el-input__count {
		background-color: transparent;
	}

	.updata {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.updataimg {
		background-color: var(--theme-top-nav-bg);;
		border: 0.01rem solid var(--theme-color-line);
		height: 1.25rem;
		position: relative;
		width: 1.25rem;
	}

	.dnYUUDV25IlSW_S8juP6 {
		height: 0.37rem;
		width: 0.02rem;
		background-color: var(--theme-color-line);
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.Eaw_t5ASDXk8DId5Ps3c {
		height: 0.02rem;
		width: 0.37rem;
		background-color: var(--theme-color-line);
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.pRNoweFo4ia8VfONCik4 {
		cursor: pointer;
		display: block;
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.text1 {
		font-size: .22rem;
		color: var(--theme-alt-neutral-2);
		display: block;
		line-height: 1.63;
		margin-top: 0.15rem;
	}

	.text2 {
		font-size: .24rem;
		color: #ffffff;
		line-height: .4rem;
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.baocun {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		flex: 1;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
	}

	.conitem {
		padding: 0.25rem 0.1rem 0.2rem 0.18rem;
		width: 100%;
		margin-bottom: 0.2rem;
		font-size: .18rem;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.1rem;
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
	}

	.conitem:last-child {
		margin-bottom: 0;
	}

	.citop {
		font-size: .24rem;
		color: #fff;
	}

	.cicon {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cicon .left {
		height: 0.7rem;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: var(--theme-text-color);
		display: -webkit-box;
		line-height: 1.61;
		margin: 0.1rem 0 0.05rem;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: .24rem;
	}

	.cicon .right {
		height: 0.7rem;
		font-size: .24rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
		text-align: right;
		width: auto;
	}

	.cicon .right span {
		color: #ffaa09;
		cursor: pointer;
		margin-right: 0.1rem;
	}

	.eWpIvvWooY9HHXe2jC2q {
		color: var(--theme-color-line);
		cursor: pointer;
		transform: rotate(180deg);
		font-size: 12px;
	}

	.time {
		color: var(--theme-alt-neutral-2);
		line-height: 1.33;
		font-size: .22rem;
	}

	.con1 {
		width: 100%;
	}

	.con1 .label {
		color: #ffffff;
		display: block;
		font-size: .2rem;
		margin-bottom: 0.2rem;
	}

	.con1 img {
		display: block;
		margin: 0 auto;
	}

	.con1 p {
		font-size: .18rem;
		line-height: 1.56;
		margin-top: 0.2rem;
		text-indent: 0.4rem;
		color: var(--theme-text-color);
	}
</style>